<script lang="ts" setup>
import { ref, computed, watch, onMounted, reactive } from 'vue';
import PageCaontainer from '@/arco-components/PageContainer';
import shrinkLeft from '@/assets/images/shrinkLeft.svg';
import activeShrinkLeft from '@/assets/images/activeShrinLeft.svg';
import API from '@/services';
import AQueryHeader, { useQueryHeader } from '@dangojs/a-query-header';
import CardItem from '@/views/indexApplication/indexTree/cardItem.vue';
import Tree from '@/components/Tree/index.vue';
import EmptyData from '@/components/emptyData/index.vue';

const shrinkIcon = ref(shrinkLeft);
const toggle = ref(false);
// 获取api
const {
  publicBoardDir: {
    getBoardDir,
    postBoardDir,
    getBoardDirTree,
    putBoardDirById,
    deleteBoardDirById
  },
  boardLable: { getBoardLabelList },
  board: { getPageable }
} = API;

const dashboardForm = reactive({
  dashboardId: '',
  dashboardName: '',
  dashboardType: '',
  dashboardLabel: [],
  isCollect: false
});
const typeOptions = [
  {
    label: '指标看板',
    value: 1
  },
  {
    label: '指标树',
    value: 2
  }
];
const labelOptions = ref<any>([]);
const listLoading = ref(false);
const dashboardList = ref<defs.BoardVO[]>([]);
const totalNum = ref(0);
const pageNum = ref(1);
const pageSize = ref(12);
const pageSizeOptions = [12, 24, 36, 48, 60];
const minPage = 12;
const treeRef = ref();

// 折叠展开
const changeFold = () => {
  toggle.value = !toggle.value;
};

// 自动请求
const { onAutoSubmit, params } = useQueryHeader(dashboardForm, true);
watch(params, (newVal, oldVal) => {
  if (newVal) {
    fetchDashboardList();
  }
});
// 重置筛选条件
const onReset = () => {
  console.log('重置');
  dashboardForm.dashboardName = '';
  dashboardForm.dashboardType = '';
  dashboardForm.dashboardLabel = [];
  treeRef.value.handleAll();
};

// 获取看板列表
const fetchDashboardList = async (params?: any) => {
  listLoading.value = true;
  dashboardList.value = [];
  const param = {
    dirId: dashboardForm.dashboardId, // 看板目录id
    name: dashboardForm.dashboardName, // 看板名称
    reviewType: 1, // 1: 公共看板 2:我创建的 3：获得授权的
    type: dashboardForm.dashboardType, // 类型
    labelIds: dashboardForm.dashboardLabel, // 标签
    isFavorite: dashboardForm.isCollect ? dashboardForm.isCollect : '', // 是否收藏
    isPublished: true, // 表已发布(公共看板的列表只能是已发布的)
    pageNum: pageNum.value, // 页数
    pageSize: pageSize.value // 条数
  };
  try {
    const { code, data }: any = await getPageable({ ...param });
    if (code === 200) {
      let d = data.list;
      d.forEach((item: any) => {
        item.reviewType = 1;
      });
      dashboardList.value = d;
      totalNum.value = data.total;
    }
  } catch (error) {
    console.log(error);
  } finally {
    listLoading.value = false;
  }
};

// 获取标签列表
const getLabelList = async () => {
  try {
    const { code, data }: any = await getBoardLabelList({});
    if (code === 200) {
      labelOptions.value =
        data?.map((item: any) => {
          return {
            label: `${item.name}`,
            value: `${item.id}`
          };
        }) || [];
    }
  } catch (error) {
    console.log(error);
  }
};

// 点击分页
const changePageNum = (page: number) => {
  pageNum.value = page;
  fetchDashboardList(dashboardForm);
};

// 点击数据条数
const changePageSize = (pageSizeNum: number) => {
  pageSize.value = pageSizeNum;
  fetchDashboardList(dashboardForm);
};

// 获取看板数据
const fetchList = (id: string) => {
  dashboardForm.dashboardId = id;
  pageNum.value = 1;
  pageSize.value = pageSizeOptions[0];
};

onMounted(() => {
  getLabelList();
  fetchDashboardList();
});
</script>

<template>
  <PageCaontainer>
    <div class="dashboard_container">
      <div
        class="dashboard_container-left"
        :class="
          toggle
            ? 'dashboard_container-left-hidden'
            : 'dashboard_container-left-show'
        "
      >
        <img
          :class="toggle ? 'shrink-right' : ''"
          @click="changeFold"
          :src="shrinkIcon"
          @mouseenter="
            () => {
              shrinkIcon = activeShrinkLeft;
            }
          "
          @mouseout="
            () => {
              shrinkIcon = shrinkLeft;
            }
          "
        />
        <Tree
          titles="看板分类"
          :listFn="getBoardDirTree"
          :delFn="deleteBoardDirById"
          :reNameFn="putBoardDirById"
          :addFn="postBoardDir"
          :searchFolderFn="getBoardDir"
          @fetch-list="fetchList"
          ref="treeRef"
        ></Tree>
      </div>
      <div class="dashboard_container-right">
        <AQueryHeader
          @reset="onReset"
          @autoSubmit="onAutoSubmit"
          hideSubmitBtn
          :num="3"
          style="
            padding: 10px 16px 11px;
            box-sizing: border-box;
            border-bottom: 1px solid #e8ebf2;
          "
        >
          <AFormItem show-colon label="看板名称">
            <AInput
              v-model="dashboardForm.dashboardName"
              placeholder="请输入"
              style="min-width: 190px"
              allow-clear
            />
          </AFormItem>
          <AFormItem show-colon label="类型">
            <ASelect
              v-model="dashboardForm.dashboardType"
              :options="typeOptions"
              placeholder="请选择"
              style="min-width: 190px"
              allow-clear
            />
          </AFormItem>
          <AFormItem show-colon label="标签">
            <ASelect
              v-model="dashboardForm.dashboardLabel"
              :options="labelOptions"
              placeholder="请选择"
              multiple
              style="min-width: 190px"
              allow-clear
            >
              <template #arrow-icon>
                <IconDown class="arco-select-arrow-icon" />
              </template>
            </ASelect>
          </AFormItem>
        </AQueryHeader>
        <div class="checkbox-wrap">
          <a-checkbox v-model="dashboardForm.isCollect">只看收藏</a-checkbox>
        </div>
        <div
          class="dashboard-card-wrapper"
          v-loading="listLoading"
          :class="totalNum > minPage ? '' : 'dashboard-card-wrapper-no-page'"
        >
          <div class="card-list" v-if="dashboardList.length">
            <card-item
              :list="dashboardList"
              :is-operate="false"
              dashborderType="public"
            ></card-item>
          </div>
          <EmptyData v-else></EmptyData>

          <div class="pagination-wrap" v-if="totalNum > minPage">
            <a-pagination
              show-page-size
              :total="totalNum"
              @change="changePageNum"
              @page-size-change="changePageSize"
              :default-page-size="pageSizeOptions[0]"
              :page-size-options="pageSizeOptions"
            />
          </div>
        </div>
      </div>
    </div>
  </PageCaontainer>
</template>

<style lang="scss" scoped>
@import './index.scss';
.dashboard_container-left-show {
  width: 210px;
}
.dashboard_container-left-hidden {
  width: 0;
}
</style>
<style lang="scss">
.dashboard-card-wrapper {
  .card-list {
    .card-item {
      width: calc(33.3% - 18px);
    }
  }
}
.dashboard_container-left-hidden {
  width: 0;
  .group-container {
    display: none;
  }
}
</style>
